<template>
  <!-- 廉政档案 -->
  <div class="lzdaPage">
    <div class="scrollBox">
      <!-- 廉政档案份数 -->
      <div>
        <div>
          <div class="left">
            <img src="../assets/img/lzdaIcon.png" />
          </div>
          <div class="right">
            <p>
              <label>廉政档案</label>
              <b>{{ LzdaData.integrityArchivesNum }}</b>
              <label>(份)</label>
            </p>
            <!-- <p>
              <label>覆盖率</label>
              <span>95%</span>
            </p> -->
            <div>
              <div style="width: 95%"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 排查的廉政风险点 -->
      <div>
        <div>
          <div class="left">
            <img src="../assets/img/fxpcIcon.png" />
          </div>
          <div class="right">
            <p>
              <label>排查的廉政风险点</label>
              <b>{{ LzdaData.integrityArchivesRate }}</b>
              <label>(个)</label>
            </p>
            <!-- <p>
              <label>覆盖率</label>
              <span>90%</span>
            </p> -->
            <div>
              <div style="width: 90%"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 风险防控措施 -->
      <div>
        <div>
          <div class="left">
            <img src="../assets/img/lzdaIcon.png" />
          </div>
          <div class="right">
            <p>
              <label>风险防控措施</label>
              <b>{{ LzdaData.jobRiskNum }}</b>
              <label>(个)</label>
            </p>
            <!-- <p>
              <label>覆盖率</label>
              <span>93%</span>
            </p> -->
            <div>
              <div style="width: 93%"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 已存在廉政风险点 -->
      <div>
        <div>
          <div class="left">
            <img src="../assets/img/fxpcIcon.png" />
          </div>
          <div class="right">
            <p>
              <label>已存在廉政风险点</label>
              <b>{{ LzdaData.jobRiskRate }}</b>
              <label>(个)</label>
            </p>
            <!-- <p>
              <label>覆盖率</label>
              <span>97%</span>
            </p> -->
            <div>
              <div style="width: 97%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["LzdaData"],
};
</script>

<style lang="scss" scoped>
.lzdaPage {
  width: 100%;
  height: 100%;
  overflow: hidden;

  transition: 0.5s;
  padding: 20px;
  box-sizing: border-box;

  .scrollBox {
    height: 100%;
    overflow-y: scroll;
    > div {
      height: 50%;
      display: flex;
      align-items: center;

      &:nth-child(2n) {
        .right {
          > div {
            > div {
              background: linear-gradient(
                to right,
                rgba(20, 143, 249, 0),
                rgba(20, 143, 249, 1)
              );
            }
          }
        }

        &:hover {
          .right {
            > p {
              b,
              span {
                color: #42b2ff;
              }
            }
          }
        }
      }

      &:hover {
        .right {
          > p {
            padding: 0 10px;
            box-sizing: border-box;
            b,
            span {
              color: #0efadf;
            }
          }

          > div {
            > div {
              &:before {
                top: -3px;
                right: -3px;
                width: 10px;
                height: 10px;
              }
            }
          }
        }
      }

      > div {
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: row;
        overflow: hidden;

        .left {
          width: 48px;
          height: 48px;
          overflow: hidden;
          margin-right: 20px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          width: 100%;
          height: 48px;
          flex: 1;
          overflow: hidden;

          > p {
            width: 60%;
            height: 25px;
            line-height: 25px;
            float: left;
            float: left;
            text-align: left;
            margin: 0;
            transition: 0.5s;

            &:nth-child(2) {
              width: auto;
              float: right;
            }

            label,
            b,
            span {
              display: inline-block;
              font-size: 13px;
              float: left;
              transition: 0.5s;
            }

            label {
              color: #d0e0fe;
            }

            b {
              font-size: 20px;
              font-weight: 300;
              color: #fff;
              font-family: "Bahnschrift";
              padding: 0 10px;
              font-weight: 700;
            }

            span {
              color: #8da8d5;
              margin-left: 20px;
            }
          }

          > div {
            width: 100%;
            height: 4px;
            background: linear-gradient(
              to right,
              rgba(17, 46, 96, 0),
              rgba(17, 46, 96, 1)
            );
            float: left;
            margin-top: 10px;

            > div {
              position: relative;
              height: 4px;
              float: left;
              background: linear-gradient(
                to right,
                rgba(14, 245, 220, 0),
                rgba(14, 245, 220, 1)
              );

              &:before {
                position: absolute;
                content: "";
                top: -2px;
                right: -2px;
                width: 8px;
                height: 8px;
                background: #fff;
                border-radius: 100%;
                transition: 1s;
                z-index: 2;
              }
            }
          }
        }
      }
    }
  }
  *::-webkit-scrollbar {
    width: 0px;
    height: 10px;
  }
}
</style>
